<template>
	<view>
		<!-- 自定义导航 -->
		<custom-navbar :title='title' bgColor='#0081ff' navbarStyle ='custom'></custom-navbar>
		<!-- 显示内容 -->
		<view class="padding margin-bottom-xl">
			<view class="setMoudle">
				<view class="setService solid-bottom">
					<view class="flex-sub">密码修改</view>
					<view class="cuIcon-right" />
				</view>
				<view class="setService solid-bottom">
					<view class="flex-sub">用户协议</view>
					<view class="cuIcon-right" />
				</view>
			</view>
		</view>
		<!-- 退出登录 -->
		<view class="width height-xl flex-allCenter">
			<button class="cu-btn lg width-btn bg-red" @click="toLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {mapActions} from "vuex";
	export default {
		data() {
			return {
				title:'系统设置',
			}
		},
		methods: {
			...mapActions(["Logout"]),
			/**退出登录**/
			toLogout() {
				var that = this;
				that.load = true;
				let content = '确认退出吗？';
				that.$modal.confirm(content).then(() => {
					that.Logout().then(res => {
						that.$modal.nextSuccess('成功退出').then(() => {
							setTimeout(() => {
								that.load = false;
								that.$tab.navigateTo('/pages/index/login')
							}, 1000)
						})
					});
				}).catch(() => {
					that.load = false;
				})
			}
		}
	}
</script>

<style>
	.setMoudle{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		background-color: #fff;
		border-radius: 12rpx;
	}
	
	.setService {
		width: 100%;
		height: 100rpx;
		padding: 0 15rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 12rpx;
	}

</style>
